<template>
    <div class="SparePartTemplate">
        <div id="templateMain" v-if="thisData">
            <div class="wrap">
                <qrcode-vue :value="thisData.code" :size="200" foreground="#000000" level="H" :title="thisData.code" />
                <div class="info">
                    <div class="text">钢丝绳编码：{{ thisData.code }}</div>
                    <div class="text">钢丝绳名称：{{ thisData.name }}</div>
                    <div class="text">矿山名称：{{ thisData.department_Name }}</div>
                    <div class="text">安装地点：{{ thisData.installAddressName }}</div>
                    <div class="text">钢丝绳类型：{{ thisData.wireropeTypeName }}</div>
                    <div class="text">安装日期：{{ Gx.YMD(thisData.installDate) }}</div>
                </div>
            </div>

            <!-- <table class="table" border="1">
                <tr>
                    <td rowspan="6" aligh="center">
                        <qrcode-vue :value="thisData.code" :size="200" foreground="#000000" level="H" :title="thisData.code" />
                    </td>
                    <td>钢丝绳编码：</td>
                    <td>
                        {{ thisData.code }}
                    </td>
                </tr>
                <tr>
                    <td>钢丝绳名称：</td>
                    <td>{{ thisData.name }}</td>
                </tr>
                <tr>
                    <td>矿山名称：</td>
                    <td>{{ thisData.department_Name }}</td>
                </tr>
                <tr>
                    <td>安装地点：</td>
                    <td>{{ thisData.installAddressName }}</td>
                </tr>
                <tr>
                    <td>钢丝绳类型：</td>
                    <td>{{ thisData.wireropeTypeName }}</td>
                </tr>
                <tr>
                    <td>安装日期：</td>
                    <td>{{ Gx.YMD(thisData.installDate) }}</td>
                </tr>
            </table>

            <table class="table" border="1">
                <tr>
                    <td rowspan="6" aligh="center">
                        <qrcode-vue :value="thisData.code" :size="200" foreground="#000000" level="H" :title="thisData.code" />
                    </td>
                    <td>钢丝绳编码： {{ thisData.code }}</td>
                </tr>
                <tr>
                    <td>钢丝绳名称：{{ thisData.name }}</td>
                </tr>
                <tr>
                    <td>矿山名称：{{ thisData.department_Name }}</td>
                </tr>
                <tr>
                    <td>安装地点：{{ thisData.installAddressName }}</td>
                </tr>
                <tr>
                    <td>钢丝绳类型：{{ thisData.wireropeTypeName }}</td>
                </tr>
                <tr>
                    <td>安装日期：{{ Gx.YMD(thisData.installDate) }}</td>
                </tr>
            </table> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import Gx from "@/gx/Gx";
import QrcodeVue from "qrcode.vue";

//接受页面参数
const route = useRoute();
let queryId = route.query.id;

//定义当前页面数据对象
const thisData = ref<any>();

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    App.CallApi(Api.UsingWirerope.GetByID(Number(queryId)), {
        success: (res) => {
            thisData.value = res;
            setTimeout(() => {
                print();
            }, 500);
        },
    });
};
const print = () => {
    window.print();
};
</script>

<style scoped>
.wrap {
    /* background: #f2f2ff; */
    display: flex;
    align-content: center;
    padding: 20px;
    margin-bottom: 20px;
}

.wrap .info {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}
.info .text {
    flex: 1;
    display: flex;
    align-items: center;
}
.table {
    width: 100%;
    line-height: 50px;
}

.table td {
    border: solid 1px #000000;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    height: 42px;
}
</style>
